<template>
  <el-row>
    <el-col :span="24">
      <Portlet title="商品信息">
        <el-form label-position="left" label-width="110px">
          <el-row>
            <el-col :lg="8" :md="12" :xl="6">
              <el-form-item label="厂家名称:">
                <span>{{ detail.manufacturersName }}</span>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :md="12" :xl="6">
              <el-form-item label="商品编号:">
                <span>{{ detail.productOutNo }}</span>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :md="12" :xl="6">
              <el-form-item label="商品名称:">
                <span>{{ detail.productName }}</span>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :md="12" :xl="6">
              <el-form-item label="商品大类:">
                <span>{{ detail.bigClass }}</span>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :md="12" :xl="6">
              <el-form-item label="商品小类:">
                <span>{{ detail.middleClass }}</span>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :md="12" :xl="6">
              <el-form-item label="总包件:">
                <span>{{ detail.totalPackage }}</span>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :md="12" :xl="6">
              <el-form-item label="总体积:">
                <span>{{ detail.totalVolume }}m³</span>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :md="12" :xl="6">
              <el-form-item label="总重量:">
                <span>{{ detail.totalWeight }}kg</span>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :md="12" :xl="6">
              <el-form-item label="存储类型:">
                <span>{{ detail.storageType }}</span>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :md="12" :xl="6">
              <el-form-item label="规格:">
                <span>{{ detail.standard }}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="clearfix"></div>
      </Portlet>
    </el-col>

    <el-col :span="24" class="col-xs-12">
      <Portlet title="包件信息">
        <package-info :packageInfo="packageInfo"></package-info>
        <div class="clearfix"></div>
      </Portlet>

      <Portlet>
        <el-row>
          <el-col :span="24" class="text-center">
            <el-button class="btn-block" @click.prevent="toEdit" type="primary">编辑</el-button>
          </el-col>
        </el-row>
      </Portlet>
    </el-col>
  </el-row>
</template>
<script>
import {dotData} from '@/utils'
import PackageInfo from '@/views/oms/basicData/manufactorPro/PackageInfo'
export default {
  components: {
    PackageInfo
  },
  data() {
    return {
      id: this.$route.params.id,
      detail: {}
    }
  },
  created() {
    this.getData()
  },
  computed: {
    packageInfo() {
      return dotData(this.detail, 'packageInfos') || []
    }
  },
  methods: {
    getData() {
      this.$ajax.get('/ms-warehouse-order/basicData/findManufacturersProductInfo', {id: this.id}).then(response => {
        if (!response.data) {
          return
        }
        this.detail = response.data || {}
      })
    },
    toEdit() {
      this.$router.push({path: '/ss-oms/basic-data/manufactor-pro/edit/' + this.id})
    }
  }
}
</script>
